<template>
<div class="box">
  <el-table class="table" v-loading="loading" :data="list.data" style="width: 100%" :header-cell-style="{textAlign: 'center'}">
    <el-table-column prop="examName" label="考试名称" width="200"/>
    <el-table-column prop="className" label="班级"  />
    <el-table-column prop="examType" label="考试类型">
      <template #default="scope">
        {{examTypeMap[scope.row.examType]}}
      </template>
    </el-table-column>
    <el-table-column prop="examStartTime" label="考试开始时间"  width="150" show-overflow-tooltip/>
    <el-table-column prop="duration" label="时长（分钟）" width="100"/>
    <el-table-column prop="examEndTime" label="考试结束时间"  width="150" show-overflow-tooltip/>
    <el-table-column prop="status" label="状态" >
      <template #default="scope">
        <el-tag :type="statusMap[scope.row.status]?.type" disable-transitions>
          {{ statusMap[scope.row.status]?.text }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="考试状态" >
      <template #default="scope">
        <el-tag :type="examStatusMap[scope.row.examStatus]?.type || 'primary'" disable-transitions>
          {{ examStatusMap[scope.row.examStatus]?.text || '未提交' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="remarks" label="备注信息"  width="130" show-overflow-tooltip/>
    <el-table-column prop="realName" label="创建人" >
       
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="220">
      <template #default="scope">
        <ElButton size="small" v-if="scope.row.status>=1 && scope.row.examStatus>=1" @click="view(scope.row)">查看考试结果</ElButton>
        <ElButton size="small" type="danger" v-if="scope.row.status==1 && (scope.row.examStatus<=0 ||!scope.row.examStatus)" @click="createExam(scope.row)">开始{{examTypeMap[scope.row.examType]}}</ElButton>
        <!-- <span class="end" v-if="scope.row.status>=1 && scope.row.examStatus==null">考试已结束</span> -->
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      class="pagination" 
      v-model:current-page="page.current"
      v-model:page-size="page.size"
      :page-sizes="[5, 10, 20, 50]"
      size="small"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</div>
</template>

<script setup>
import { ref,reactive, onMounted } from 'vue'

import { useRoute } from 'vue-router';
import router from '@/router'
import axios from '@/axios/index.js'
const route = useRoute();

let list = ref([]);
const loading = ref(true)

let student = ref({})
onMounted(() =>{
  student.value = JSON.parse(localStorage.getItem('student'));
  getList()
})
const createExam = (row) =>{
  router.push({path:'/createExam',query:{id:row.id}})
}
const statusMap = {
  0: { type: 'primary', text: '未开始' },
  1: { type: 'success', text: '进行中' },
  2: { type: 'info', text: '已结束' },
};
const examStatusMap = {
  0: { type: 'primary', text: '未提交' },
  1: { type: 'success', text: '已提交' },
  2: { type: 'danger', text: '批改中' },
  3: { type: 'info', text: '已批改' },
};

const examTypeMap = {
  0:"模拟考",
  1:"考试",
}

const view = (row) =>{
  router.push({path:'/createExam',query:{id:row.id}})
}
/**
 * 分页
 */
 const page = reactive({
  current: 1,
  pages: '',
  size:10,
  total:""
});
const handleCurrentChange = () => {
  getList()
}
const handleSizeChange = (val) => {
  getList(val)
  
}

const getList = async (val) =>{
  console.log(val,page.current);
  
  try {
    const res = await axios.get("/exam/selectStudentExam",{
      params:{
        current:page.current,
        size:val||page.size,
        id:student.value.studentInfo.classId
      }
    })
    console.log(res);
    if(res.data.code==200){
      loading.value=false
      page.current = res.data.data.current
      page.pages = res.data.data.pages
      page.size = res.data.data.size
      page.total = res.data.data.total
      list.value = res.data.data
      console.log(list.value);
      
    }
  } catch (error) {
    console.log(error);
  }
}
</script>

<style scoped>
.left {
  width: 300px;
  border-right: 1px solid #BBBBBB;
  box-sizing: border-box;
  padding: 50px;
  font-size: 16px;
}
.box{
  margin: 50px auto;
  width: 80%;
}
::v-deep .el-table .el-table__cell{
  text-align: center;
}
.pagination{
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
.end{
  background: #EBEDF0;
}
</style>